.base-header {
  justify-content: space-between;
  align-items: center;

  .logo {
    display: none;
    width: 10rem;
  }

  .right-side {
    flex-grow: 1;
    justify-content: space-between;
    align-items: center;
    //检索框
    .search-input-box {
      input {
        width: 15rem;
        line-height: 2rem;
        border-radius: 2.5px;
        // border-radius: 1rem;
        outline: none;
        text-indent: 0.5rem;
      }
    }

    .right-att {
      position: relative;
      align-items: center;
      .user-avatar {
        width: 2rem;
        height: 2rem;
        border-radius: 50%;
        background-size: cover;
        background-position: center;
        cursor: pointer;
        margin: 0 0.75rem;
      }

      .user-name {
        margin: 0 0.75rem;
        cursor: pointer;
      }

      // 功能性盒子开关按钮
      .function-btn {
        width: 1.25rem;
        height: 1rem;
        flex-direction: column;
        justify-content: space-between;
        .line {
          height: 2.5px;
          background-color: #6a6a6a;
        }
        cursor: pointer;

        &:hover .line{
          background-color: #ff4545;
        }
      }

      // 功能盒子
      .function-item-box {
        position: absolute;
        z-index: 9;
        top: 2.5rem;
        right: 0rem;
        flex-direction: column;
        align-items: center;
        width: 15rem;

        align-items: center;
        box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.25);
        border-radius: 5px;
        background-color: white;

        // 功能性路由盒子
        .function-route-box {
          width: 100%;
          box-sizing: border-box;
          justify-content: space-between;
          padding: 1rem 1rem 0;
          .function-box {
            cursor: pointer;
            margin-bottom: 0.25rem;
            background-color: black;
            height: 5.25rem;
            width: 5.25rem;
            border-radius: 5px;
            color: white;
            padding: 0.5rem;
            background-size: cover;
            background-position: center;
          }
        }
        // 功能性路由盒子 结尾

        .function-item {
          text-align: center;
          width: 100%;
          padding: 0.75rem 0;
          font-size: 0.8rem;
          font-weight: lighter;
          cursor: pointer;
          &:hover {
            background-color: #e2e2e2;
          }
        }
      }
      // 功能盒子 结尾

      .right-att {

      }

      // 链接
      .link {
        cursor: pointer;
        &:hover {
          color: #ff4545;
        }
      }
      // 链接 结尾
    }


  }
}

@media(max-width: 578px) {
  .base-header {
    flex-direction: column;
    align-items: unset;
    .right-side {
      margin-top: 0.5rem;
      .search-input-box {
        width: 100%;
        input {
          width: 100%;
          border-radius: 5px;
          line-height: 2.5rem;
        }
      }

      .right-att {
        display: none;
      }
    }

    .logo {
      display: block;
      width: 10rem;
    }
  }
}